var nav = document.querySelectorAll(".nav li a");
var main = document.querySelectorAll(".main>div");
for(var i =0; i<nav.length; i++){
    nav[i].index= i;
    nav[i].addEventListener('mouseover',function(){
        for(var j=0; j<nav.length; j++){
            nav[j].classList.remove("active");
            main[j].classList.remove("active");
        }
        console.log(this.index);
        this.classList.add('active');
        main[this.index].classList.add("active");
    })
}